<template>
  <div id="meetDetail" v-show="loading">
   <!--  <van-nav-bar title="邀请会议详情" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="nav-container">
      <div class="bg-blue"></div>
      <img class="head" src="../../assets/notification/head.png" alt="head">
      <div class="content">
        <p class="name">{{department}}-{{name}}</p>
        <p class="info">邀请你出席会议</p>
        <van-cell-group :border="false">
          <van-cell title="会议室：" :value="room" :border="false" title-class="title-class" value-class="conten-class"/>
          <van-cell title="会议主题：" :value="subject" :border="false" title-class="title-class" value-class="conten-class"/>
          <van-cell title="会议时间：" :border="false" title-class="title-class" value-class="conten-class">
            <template slot="default">
              <p>{{time.split(" ")[0]}}</p>
              <p>{{$common.dateToTime(time) + ' -' + $common.dateToTime(endtime)}}</p>
            </template>
          </van-cell>
          <van-cell :border="false" title-class="custom-title-class" >
            <template slot="title">
              <span class="custom-title">出席人员：</span>
              <span class="custom-info">共{{total}}人参加</span>
            </template>
            <template slot="default">
              <span class="slot-value" @click="checkAll">查看全部</span>
            </template>
          </van-cell>
          <div class="persons">
            <van-row type="flex">
              <van-col v-for="(item,index) in attendance" :key="index" v-if="index < 5"  span="4">
                <template v-if="atten.pic == null">
                  <img class="per-img" src="../../assets/notification/head.png" @click="checkIdCard(atten.id)">
                </template>
                <template v-else>
                  <img class="per-img" :src="`${$common.filePath}${atten.pic}`" @click="checkIdCard(atten.id)">
                </template>
                <p class="align-center per-name van-ellipsis">{{item.name}}</p>
              </van-col>
              <template v-if="attendance.length > 5">
                <van-col span="4">
                  <div class="last-person"></div>
                  <p class="per-name align-center">......</p>
                </van-col>
              </template>
            </van-row>
          </div>
        </van-cell-group>
        <div class="button-foot" v-if="is_agree != '1' && is_agree != '2'">
          <van-row type="flex" justify="space-around">
            <van-col span="11"><van-button class="fill-width" color="#CACACA" @click="defined" :disabled="disabled">拒 绝</van-button></van-col>
            <van-col span="11"><van-button class="fill-width" color="#2E79FF" @click="agreed"  :disabled="disabled">同 意</van-button></van-col>
          </van-row>
        </div>
      </div>
    </div>
    <!-- 所有参会人员 -->
    <van-popup v-model="showAll" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true">
      <div class="full-container">
        <van-nav-bar title="出席人员" left-arrow  @click-left="goBack"></van-nav-bar>
        <div class="alls">
          <p class="information">共{{total}}人参会</p>
          <van-cell-group :border="false" v-for="(item,i) in attendance" :key="i">
            <van-cell>
              <template slot="title">
                <div class="flex-base" @click="checkIdCard(item.id)">
                  <template v-if="item.pic == null">
                    <img class="tag-img" src="../../assets/notification/head.png">
                  </template>
                  <template v-else>
                    <img class="tag-img" :src="`${$common.filePath}${item.pic}`">
                  </template>
                  <span class="title-text mrgin-l-15">
                    {{item.name}}
                  </span>
                </div>
              </template>
              <template slot="default">
                <div class="right-value">
                  <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                  <template v-if="item.tel">
                    <img class="custom-class" src="../../assets/meeting/tel.png" @click="phoneCall(item.tel)">
                  </template>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        loading: false,
        id:null,//会议ID
        showAll: false,
        list:[],

        department:"",//部门
        name:      "",//姓名
        room:      "",//会议室
        subject:   "",//会议主题
        time:      "",//时间
        endtime:   "",
        attendance:[],//出席人员数组
        total:     "",//人数
        type:      '', //会议是未邀请
        is_agree:  '', //是否同意拒绝  1同意  2拒绝 3未做选择
        disabled: false,
      }
    },
    activated() {
      this.loading = false
      this.id= null,//会议ID
      this.showAll= false,
      this.list= [],

      this.department= ""//部门
      this.name=      ""//姓名
      this.room=      ""//会议室
      this.subject=   ""//会议主题
      this.time=      ""//时间
      this.endtime=   ""
      this.attendance= []//出席人员数组
      this.total=     ""//人数
      this.type=      '' //会议是未邀请
      this.is_agree = ''
      this.disabled = false
      // this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '邀请会议详情'})
      this.id = this.$route.query.id
      this.showDetail()
    },
    methods:{
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 获取会议详情
       * @return {[type]} [description]
       */
      showDetail() {
        let config = {
          method: 'post',
          url: `${this.$common.basePath}message/notice.php`,
          data: {
            user_id: this.$store.state.userId,
            type: 'meeting',
            do: 'detail',
            id: this.id,
          }
        }
        this.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        this.$axios(config).then(res => {
          // console.log(res)
          this.department = res.data.department
          this.name = res.data.name
          this.room = res.data.conferenceroom
          this.subject = res.data.subject
          this.time = res.data.startdate
          this.endtime = res.data.enddate
          this.total = res.data.attendance_total
          this.attendance = res.data.attendance
          this.type = res.data.type
          this.is_agree = res.data.is_agree
          // console.log(this.is_agree)
          this.$nextTick(_ => {
            this.$toast.clear()
            this.loading = true
          })
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 查看所有参会人员
       * @return {[type]} [description]
       */
      checkAll(){
        this.showAll = true
      },
      /**
       * 出席人员返回
       * @return {[type]} [description]
       */
      goBack() {
        this.showAll = false
      },
      /**
       * 拒绝
       * 1表示同意，2表示拒绝
       * @return {[type]} [description]
       */
      defined() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: "提示",
          message: "确认拒绝此次会议吗？"
        }).then(() => {
          let config = {
            method: "post",
            url: `${this.$common.basePath}message/conference.php`,
            data: {
              conference_id: this.id,
              user_id: this.$store.state.userId,
              select: 2
            }
          }
          this.$axios(config).then(res => {
            this.disabled = true
            this.$toast({
              message:'成功拒绝！',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$bridge.callHandler("close")
            },1500)
          }).catch(err => {
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 同意
       * 1表示同意，2表示拒绝
       * @return {[type]} [description]
       */
      agreed() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: "提示",
          message: "是否确认参加本次会议？"
        }).then(() => {
          let config = {
            method: "post",
            url: `${this.$common.basePath}message/conference.php`,
            data: {
              conference_id: this.id,
              user_id: this.$store.state.userId,
              select: 1
            }
          }
          this.$axios(config).then(res => {
            this.disabled = true
            this.$toast({
              message: res.msg,
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$bridge.callHandler("close")
            },1500)
          }).catch(err => {
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 拨打电话
       * @return {[type]} [description]
       */
      phoneCall(phone) {
        console.log(phone)
        this.$bridge.callHandler('makePhoneCall', { tel: phone })
      },
      /**
       * 用户名片
       * @param  {[type]} uid [description]
       * @return {[type]}     [description]
       */
      checkIdCard(uid) {
        console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .button-foot{
    text-align: center;
    margin-top: 30px;
    margin-left: 8px;
    margin-right: 8px;
  }
  .fill-width{
    width: 100%!important;
  }
  .bg-blue{
    height: 148px;
    background-color: #2E79FF;
  }
  .content{
    margin: 0 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1),2px -2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    top: -163px;
    padding-bottom: 15px;
  }
  .head{
    width: 65px;
    height: 65px;
    position: relative;
    top: -122px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  .name{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    padding-top: 35px;
    margin-bottom: 10px;
  }
  .info{
    color: #333333;
    font-size: 14px;
    text-align: center;
    margin-top: 2px;
  }
  .title-class{
    max-width: 100px!important;
    font-size: 17px;
    color: #999999;
  }
  .conten-class{
    text-align: left;
    color: #333333;
    font-size: 17px;

    p {
      margin: 0;
    }
  }
  .custom-title-class{
    min-width: 180px;
  }
  .custom-title{
    color: #999999;
    font-size: 17px;
  }
  .custom-info{
    color: #999999;
    font-size: 14px;
    margin-left: 10px;
  }
  .slot-value{
    color: #2E79FF;
    font-size: 14px;
  }
  .persons{
    padding: 0 15px;
  }
  .last-person{
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background-color: #F5F5F5;
  }
  .per-img{
    width: 45px;
    height: 45px;
    border-radius: 4px;
  }
  .per-name{
    width: 45px;
    margin: 0;
    color: #333333;
    font-size: 14px;
  }
  .full-container{
    height: 100vh;
  }
  .information{
    color: #999999;
    font-size: 14px;
    margin-left: 15px;
  }
  .alls{
    padding: 5px 0px;
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .title-img{
    width: 45px;
    height: 45px;
  }
  .title-text{
    font-size: 17px;
    color: #333333;
  }
  .mrgin-l-15{
    margin-left: 15px;
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  a{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .desc-time {
    padding-left: 116px;
  }
</style>
<style type="text/css" lang="less">
  #meetDetail{
    .van-nav-bar{
      background-color: #2E79FF!important;
    }
    .van-nav-bar__title{
      color: #fff;
    }
    .van-nav-bar .van-icon{
      color: #333333!important;
      font-size: 17px;
    }
  }
</style>
